<!--
 * @Description: 
 * @Version: 0.0.0
 * @Autor: 源
 * @Date: 2022-11-01 14:12:15
 * @LastEditors: 源
 * @LastEditTime: 2022-11-02 09:12:52
 * @FilePath: \pnpm-v3-ts-ui\docs\.vitepress\vitepress\vue\common\icon-list.vue
-->
<template>
  <ul class="icon">
    <li
      class="icon-item"
      v-for="item in lists"
      v-copy='`<lm-icon name="${item}" />`'
    >
      <span class="icon-item-view">
        <lm-icon :name="item" :size="24"/>
        <span class="icon-name">{{ item }}</span>
      </span>
    </li>
  </ul>
</template>
<script lang="ts">
export default {
  name: "VpIconList"
}
</script>
<script setup lang="ts">
import { ref } from 'vue';
const lists = ref([])

const getCssFonts = () => {
  var cssBlock = document.styleSheets;
  var arr = [...cssBlock];
  arr.forEach((item) => {
    var rules = [...item.rules];
    lists.value.push(
      ...rules
        .filter((i) => i?.selectorText?.includes(".lm-icon-"))
        .map((i) => i.selectorText.slice(9, -8))
    );
  });
};
getCssFonts();

</script>
<style scoped lang="scss">
.icon {
  overflow: hidden;
  list-style: none;
  padding: 0 !important;
  border-top: 1px solid #dcdfe6;
  border-left: 1px solid #dcdfe6;
  border-radius: 4px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);

  &-item {
    margin-top: 0px;
    text-align: center;
    color: #606266;
    height: 90px;
    font-size: 13px;
    border-right: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
    cursor: pointer;

    &-view{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
  }
  &-name{
    margin-top: 8px;
  }
}
</style>
